<!DOCTYPE html>
<html lan = "en">
    <head>
        <meta charset = "uft-8">
        <title>Ping Pang</title>
    </head>
    <body>
       <header>
           <h1>Ping pang</h1>
       </header>
       <div id = scoreboard>
           <div class = "score"> Player A: <span id = "scoreA">0</span></div>
           <div class = "score"> Player B: <span id = "scoreB">0</span></div>
       </div>
       <div id = "game">
           <div id = "playground">
               <div id = "paddleA" class = "paddle"></div>
               <div id = "paddleB" class = "paddle"></div>
               <div id = "ball"></div>
           </div>
       </div>
       <footer>
           This is an example of creating a Ping Pang Game.
       </footer>
       <script src = "js/jquery-3.3.1.min.js"></script>
       <script src = "js/html5games.pingpong.js"></script>
       <script>
         $(function() {
             alert("welcome to the ping pang battle.")
         })
       </script>
    </body>
    <style>
      #playground {
          background: #e0ffe0 url(images/pixel_grid1.jpg);
          width: 400px;
          height: 200px;
          position: relative;
          overflow: hidden;
      }
      #ball {
          background: #fbb;
          position: absolute;
          width: 20px;
          height: 20px;
          left: 150px;
          top: 100px;
          border-radius:10px;
      }
      .paddle {
          background: #bbf;
          left: 50px;
          top: 70px;
          position: absolute;
          width: 10px;
          height: 70px;
      }
      #paddleB {
          left: 320px;
      }
    </style>
</html>